<template>
  <div name="Header" id="header">
    <el-avatar class="centerH" :src="circleUrl"> </el-avatar>
    <div class="centerH" style="margin-left: 4em">
      <span
        >欢迎督导员:
        <span class="spanText">{{ $store.getters.name }}</span></span
      >
    </div>

    <el-button
      class="btn centerH"
      type="danger"
      icon="el-icon-caret-right"
      size="medium"
      @click="Quit"
      >退出</el-button
    >
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {},
  components: {},
  data() {
    return {
      people: "odjbk",
      circleUrl: "http://www.danzhaowang.com/uploadfiles/school/xh/22276.jpg",
    };
  },
  created() {},
  methods: {
    Quit() {
      this.$store.dispatch("logout").then(() => {
        this.$router.push({ path: "/login" });
        this.$message.success({
          message: "注销成功！",
          duration: 1000,
        });
      });
    },
  },
  computed: {},
  mounted() {},
};
</script>

<style scoped>
#header {
  width: 100%;
  height: 100%;
  position: relative;
  user-select: none;
}
.btn {
  right: 0px;
}
.spanText {
  font-size: 20px;
  color: rgb(7, 7, 7);
}
</style>
